<template>
    <div>
        <headers />

        <div class="container mb-30">
            <main-nav />

            <el-card class="box-card">
                <el-row :gutter="40">
                    <el-col :span="12">
                        <carousel :list="carouselList" />
                    </el-col>
                    <el-col :span="6">
                        <div class="hd-title">
                            <h3>行业资讯</h3>
                        </div>
                        <categoryBlock v-for="(item, index) in hyNewsList" :key="index" :item="item" />
                    </el-col>
                    <el-col :span="6">
                        <div class="hd-title">
                            <h3>公司动态</h3>
                        </div>
                        <categoryBlock v-for="(item, index) in gsNewsList" :key="index" :item="item" />
                    </el-col>
                </el-row>

                <div class="pt-30">
                    <div class="hd-title border-bottom">
                        <h3>视频资讯</h3>
                    </div>
                    <div v-loading="loading">
                        <template v-if="!isEmpty">
                            <div class="list">
                                <item v-for="(item, index) in list" :key="index" :item="item" />
                            </div>
                            <div class="text-center mt-30">
                                <el-pagination @current-change="handleCurrentChange"
                                    :current-page="params.page" :page-size="params.pagesize"
                                    :page-sizes="[10, 20, 30, 40]" layout="total, prev, pager, next" :total="total"
                                    hide-on-single-page>
                                </el-pagination>
                            </div>
                        </template>
                        <el-empty v-if="isEmpty" description="暂无数据"></el-empty>
                    </div>
                </div>
            </el-card>
        </div>
        <footers />
    </div>
</template>

<script>
import headers from "@/components/header.vue"
import footers from "@/components/footer.vue"
import mainNav from "@/components/mainNav.vue"
import carousel from "./components/carousel.vue"
import item from "./components/item.vue"
import categoryBlock from "./components/categoryBlock.vue"


import { getNewsList } from "@/api/apis"

export default {
    name: "news",
    components: {
        headers,
        footers,
        mainNav,
        carousel,
        item,
        categoryBlock
    },
    data () {
        return {
            loading: true,
            categoryBlockList: [],
            carouselList: [], // 焦点图数据
            hyNewsList: [], // 行业资讯数据
            gsNewsList: [], // 公司动态数据
            list: [],
            isEmpty: false,
            total: 0, // 总条数
            params: {
                type: 3, // 1行业2公司3视频4图片
                page: 1, // 当前页
                pagesize: 10, // 每页条数
                lastPage: 1, // 最后一页
            }
        }
    },
    created () {

    },
    mounted () {
        //this.searchCb()
        //this.searchVn()
        this.getCarousel();
        this.getHyNewsList();
        this.getGsNewsList();
        this.getVideoList();
    },
    methods: {
        handleCurrentChange (val) {
            this.params.page = val
            this.getList()
        },
        // 获取焦点图
        getCarousel() {
            let that = this;
            getNewsList({ type: 4, pagesize: 6 }).then(res => {
                if (res.code === 1) {
                    that.carouselList = res.data.data;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        // 获取行业资讯数据
        getHyNewsList() {
            let that = this;
            getNewsList({ type: 1, pagesize: 9 }).then(res => {
                if (res.code === 1) {
                    that.hyNewsList = res.data.data;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        // 获取公司动态数据
        getGsNewsList() {
            let that = this;
            getNewsList({ type: 2, pagesize: 9 }).then(res => {
                if (res.code === 1) {
                    that.gsNewsList = res.data.data;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        // 获取视频列表
        getVideoList(){
            let that = this
            that.loading = true;
            getNewsList({
                ...that.params
            }).then(res => {
                if (res.code === 1) {
                    that.list = res.data.data
                    that.total = res.data.total
                    //that.params.pagesize = Number(res.data.per_page)
                    that.params.lastPage = res.data.last_page
                    that.isEmpty = !that.list.length;
                } else {
                    this.$message.error(res.msg);
                }
                that.loading = false;
            })
        }
    }
}
</script>

<style lang="less" scoped>
.hd-title {
    &.border-bottom {
        padding-bottom: 15px;
        border-bottom: 2px solid #EF312A;
    }

    h3 {
        color: #ef312a;
    }
}

.list {
    display: grid;
    //grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px;
    margin-top: 30px;
}
</style>